<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="./css/themes/default/main.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="./css/round.css" type="text/css" media="screen" charset="utf-8"/>
		<script src="./javascript/round.js" type="text/javascript" charset="utf-8">
        </script>
        <title>babaru.net</title>
    </head>
    <body>
        <div id="container">
            <div id="main">
                <div id="header">
                    <h1 class="title">Babaru's babaru</h1>
                </div>
                <div id="content">
                    <div id="articles_list">
                        <ul>
                            <li class="entry">
                                <h2 class="title"><a href="#">Article 1</a></h2>
                                <div class="descr">
                                    Posted by <strong>babaru</strong>
                                    on 2008-3-12 13:05:11 +0800&nbsp;|&nbsp;Tags:
                                </div>
                                <div class="content">
                                    测试文档。
                                    今天在群里 有朋友问如何让div的高度为100% 撑满屏.
                                    才想起以前也遇到这个问题.郁闷了我很久.
                                    以前用table来布局的时候 会用到table高度100% 然后再在这个table里插一个table 垂直居中. 这样的页面 可以让它在不同分辨率下 都在显示器中间.
                                    用div 则比较麻烦了 你设置div的 高度为100% 在浏览器里 仍然看它扁的可怜.
                                    呵呵~
                                    应该怎么解决呢?
                                    你设div的高度为100%,那么它是和什么地方相对为100%?
                                    前面总得有个容器说明他的高度是多少。。这样的话div才能按比例100%继承上一级的高度
                                    可惜的是浏览器一般默认解释为内容的高度，而不是100%
                                    只要为 html 和 body 设置高度为100%就可以了
                                    html, body { height : 100%; }
                                    这样之后 div 会按比例来继承上一级的高度了.
                                    仅仅设置的DIV元素的height属性貌似没有什么效果。。
                                </div>
                            </li>
                            <li class="entry">
                                <h2 class="title">Article 2</h2>
                                <div class="pinfo">
                                    Posted by <strong>babaru</strong>
                                    on 2008-3-12 13:05:11 +0800&nbsp;|&nbsp;Tags:
                                </div>
                                <div class="content">
                                    测试文档。
                                    今天在群里 有朋友问如何让div的高度为100% 撑满屏.
                                    才想起以前也遇到这个问题.郁闷了我很久.
                                    以前用table来布局的时候 会用到table高度100% 然后再在这个table里插一个table 垂直居中. 这样的页面 可以让它在不同分辨率下 都在显示器中间.
                                    用div 则比较麻烦了 你设置div的 高度为100% 在浏览器里 仍然看它扁的可怜.
                                    呵呵~
                                    应该怎么解决呢?
                                    你设div的高度为100%,那么它是和什么地方相对为100%?
                                    前面总得有个容器说明他的高度是多少。。这样的话div才能按比例100%继承上一级的高度
                                    可惜的是浏览器一般默认解释为内容的高度，而不是100%
                                    只要为 html 和 body 设置高度为100%就可以了
                                    html, body { height : 100%; }
                                    这样之后 div 会按比例来继承上一级的高度了.
                                    仅仅设置的DIV元素的height属性貌似没有什么效果。。
                                </div>
                            </li>
                        </ul>
                        <div class="pagination">
                            <span class="disabled">&laquo;</span>
                            <span class="current">1</span>
                            <a href="/u/dave/page/2" rel="next">2</a>
                            <a href="/u/dave/page/3">3</a>
                            <a href="/u/dave/page/4">4</a>
                            <a href="/u/dave/page/5">5</a>
                            <a href="/u/dave/page/6">6</a>
                            <a href="/u/dave/page/7">7</a>
                            <a href="/u/dave/page/8">8</a>
                            <a href="/u/dave/page/2" rel="next">&raquo;</a>
                        </div>
						<div class="clearer"></div>
                    </div>
                </div>
                <div id="footer">
                    <span class="copyright">Powered by <a href="http://www.babaru.net" target="_blank">babaru.net</a>&nbsp;|&nbsp;Designed by <a href="http://live.babaru.net">babaru.trinit</a></span>
                </div>
            </div>
            <div id="sidebar">
                <ul>
                    <li class="item">
                        <h2 class="title">Scributions</h2>
                        <div class="content">
                            <ul>
                                <li class="feed">
                                    RSS 1.0
                                </li>
                                <li class="feed">
                                    RSS 2.0
                                </li>
                                <li class="feed">
                                    Atom
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="item">
                        <h2 class="title">About Me</h2>
                        <div class="content">
                            Funny, sunshine, married man.
                        </div>
                    </li>
                    <li class="item">
                        <h2 class="title">Latest Entries</h2>
                        <div class="content">
                            <ul>
                                <li>
                                    Article 1
                                </li>
                                <li>
                                    Article 2
                                </li>
                                <li>
                                    Article 3
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="item">
                        <h2 class="title">Tags</h2>
                        <div class="content">
                            <ul>
                                <li>
                                    Tag 1
                                </li>
                                <li>
                                    Tag 2
                                </li>
                                <li>
                                    Tag 3
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="item">
                        <h2 class="title">Administration</h2>
                        <div class="content">
                            <ul>
                                <li>
                                    Post New Article
                                </li>
                                <li>
                                    Dashboard
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="clear">
            </div>
        </div>
    </body>
</html>
